// 商品分类的楼层
<template>
  <div class="list">
    <no-data :msg="msg" v-if=" !this.$store.state.productListfloor.data"/>
    <template v-else>
      <ol>
        <router-link
          target="_blank"
          v-for="item in this.$store.state.productListfloor.data"
          :key="item.id"
          class="goods"
          :to="{name:'productDetails',params:{id:item.id,pid:item.goods_id,item:item}, query:{id:item.id,pid:item.goods_id,item:item}}"
        >
          <div>
            <img v-lazyload="item.goods_logo" src="@/assets/logo/loading.png">
          </div>
          <p>{{ item.goods_title }}</p>
          <p>{{ item.describe }}</p>
          <p>
            <span>￥{{item.selling_price}}</span>
            <del>￥{{item.market_price}}</del>
          </p>
        </router-link>
      </ol>
      <!-- <el-pagination
        background
        layout="prev, pager, next"
        :page-size="20"
        :page-count="this.$store.state.productListfloor.last_page"
        :current-page.sync="page"
        @prev-click="prevClick"
        @next-click="nextClick"
        @current-change="currentChange($event)"
      ></el-pagination> -->
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="20"
        :page-count="this.$store.state.productListfloor.last_page"
        :current-page.sync="page"
        @prev-click="prevClick"
        @next-click="nextClick"
        @current-change="currentChange($event)"
      ></el-pagination>
    </template>
  </div>
</template>
<script>
import goods from "../../../assets/images/goods1.png"
export default {
  name: "ListFloor",
  props: ["pageInit"],
  data() {
    return {
      page: 1,
      msg: '暂无相关商品数据...'
    }
  },
  methods: {

    jumpProductDetails(id, pid, item) {
      this.$router.push({
        name: "productDetails",
        params: {
          id,
          pid,
          item
        }
      })
    },

    prevClick() {
      console.log("上一页")
    },

    nextClick() {
      console.log("下一页 ")
    },
    // 分页发生改变时触发函数
    currentChange(ev) {
      this.$emit('pagechange', ev)
      console.log('分页点击事件。。。。。。。')
    }
  },

  watch: {
    pageInit(newName, oldName) {
      this.page = Math.ceil(newName)
    }
  },

  mounted() {
    console.log(this.$store.state.productListfloor)
  }
}
</script>
<style lang="scss" scoped>
.list {
  width: 972px;
  height: auto;
  margin-top: 20px;
  .el-pagination {
    margin-top: 50px;
    text-align: center;
  }
  h3 {
    color: #3e3e3e;
    font-size: 16px;
    padding-left: 10px;
    margin-left: 16px;
    margin-bottom: 16px;
    margin-top: 20px;
    line-height: 16px;
    border-left: 3px solid #bebebe;
  }
  ol {
    width: 971px;
    border-top: 1px solid #dedede;
    border-left: 1px solid #dedede;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    li, a{
      width: 193.2px;
      padding-bottom: 10px;
      border-bottom: 1px solid #d0d0d0;
      border-right: 1px solid #d0d0d0;
      cursor: pointer;

      div {
        width: 136px;
        height: 136px;
        margin-left: 28.7px;
        margin-top: 15px;
        margin-bottom: 10px;
        transition: all 0.5s ease-out 0s;
        &:hover {
          transform: scale(1.07, 1.07);
        }
        img {
          width: 100%;
          height: 100%;
        }
      }

      p {
        padding: 0 10px;
        font-size: 14px;
        text-align: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #333;
        &:last-child {
          margin-top: 10px;
        }
        span {
          color: #fe2121;
          font-size: 18px;
          padding-right: 10px;
          font-weight: 700;
        }
        del {
          color: #a3a3a3;
          font-size: 14px;
          // text-decoration:line-through;
        }
      }
    }
  }
}
</style>
